<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-type-contents2">
  <div class="ddp-top-flow">

    <!-- navi wrap -->
    <div class="ddp-wrap-navi">
      <a href="javascript:" class="ddp-btn-back" (click)="onClickPrevButton()"></a>
      <!-- navi -->
      <div class="ddp-ui-naviarea">
        <!-- name -->
        <div class="ddp-box-navi" [ngClass]="{'ddp-selected' : logicalNameEditFl}" (clickOutside)="logicalNameEditFl = false">
          <div class="ddp-wrap-naviname" (click)="changeLogicalNameMode()">
              <span class="ddp-data-naviname">{{columnDictionary.logicalName}}
                <em class="ddp-icon-edit2"></em></span>
          </div>
          <div class="ddp-wrap-input">
            <component-input
              [value]="reLogicalName"
              [inputClass]="'ddp-input-navi'"
              [placeHolder]="'msg.comm.ui.create.name' | translate"
              (changeValue)="onChangedSourceLogicalName($event)">
            </component-input>
            <span class="ddp-btn-check" (click)="onClickUpdateLogicalName()"></span>
          </div>
        </div>
        <!-- //name -->
      </div>
      <!-- //navi -->
    </div>
    <!-- //navi wrap -->
  </div>

  <!-- 상세 -->
  <div class="ddp-wrap-datadetail ddp-meta">
    <!-- option -->
    <div class="ddp-ui-option ddp-clear">
      <!-- edit -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.metadata.ui.codetable.detail.created.on' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <div class="ddp-data-txt">
            {{columnDictionary.createdTime | mdate:'YYYY-MM-DD HH:mm'}} {{'msg.metadata.ui.codetable.detail.by' | translate}}
            <div class="ddp-wrap-link-detail2">
              <a href="javascript:" class="ddp-link-info">{{columnDictionary.createdBy?.fullName}}</a>
              <user-information [name]="columnDictionary.createdBy?.fullName"
                                [id]="columnDictionary.createdBy?.username"
                                [email]="columnDictionary.createdBy?.email">
              </user-information>
            </div>
          </div>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //edit -->
      <!-- edit -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">{{'msg.metadata.ui.codetable.detail.updated.on' | translate}}</label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option">
          <div class="ddp-data-txt">
            {{columnDictionary.modifiedTime | mdate:'YYYY-MM-DD HH:mm'}} {{'msg.metadata.ui.codetable.detail.by' | translate}}
            <div class="ddp-wrap-link-detail2">
              <a href="javascript:" class="ddp-link-info">{{columnDictionary.modifiedBy?.fullName}}</a>
              <user-information [name]="columnDictionary.modifiedBy?.fullName"
                                [id]="columnDictionary.modifiedBy?.username"
                                [email]="columnDictionary.modifiedBy?.email">
              </user-information>
            </div>
          </div>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //edit -->

      <!-- right -->
      <div class="ddp-ui-rightoption">
        <a href="javascript:" class="ddp-btn-selection ddp-reject" (click)="onClickDeleteColumnDictionary()"><em class="ddp-icon-delete"></em>{{'msg.metadata.ui.dictionary.detail.delete' | translate}}</a>
      </div>
      <!-- //right -->
    </div>
    <!-- //option -->

    <div class="ddp-ui-datadetail">
      <label class="ddp-label-detail">{{'msg.metadata.ui.dictionary.create.dictionary.information' | translate}}</label>
      <table class="ddp-table-detail">
        <colgroup>
          <col width="160px">
          <col width="*">
        </colgroup>
        <tbody>
        <tr>
          <th>
            {{'msg.metadata.ui.dictionary.create.recommendation.column.name' | translate}}
          </th>
          <td>
            <!-- 클릭시 ddp-selected 추가 -->
            <div class="ddp-txt-edit" [class.ddp-selected]="columnNameEditFl" (clickOutside)="columnNameEditFl = false">
              <!-- data -->
              <span class="ddp-data-name" (click)="onChangeColumnNameMode()">
              {{columnDictionary.name}}
                <em class="ddp-icon-edit2"></em>
            </span>
              <!-- //data -->
              <!-- edit -->
              <div class="ddp-wrap-input">
                <component-input
                  [compType]="'default'"
                  [value]="reColumnName"
                  [placeHolder]="'msg.metadata.ph.dictionary.create.recommendation.column.name' | translate"
                  (changeValue)="reColumnName = $event; onClickUpdateColumnName();">
                </component-input>
                <span class="ddp-btn-check" (click)="onClickUpdateColumnName()"></span>
              </div>
              <!-- //edit -->
            </div>
          </td>
        </tr>
        <tr>
          <th>
            {{'msg.metadata.ui.dictionary.create.recommendation.short.name' | translate}}
          </th>
          <td>
            <!-- 클릭시 ddp-selected 추가 -->
            <div class="ddp-txt-edit" [class.ddp-selected]="shortNameEditFl" (clickOutside)="shortNameEditFl = false">
              <!-- data -->
              <span class="ddp-data-name" [class.ddp-data-none]="!columnDictionary.suggestionShortName" (click)="onChangeShortNameMode()">
              {{ columnDictionary.suggestionShortName && columnDictionary.suggestionShortName.length > 0 ? columnDictionary.suggestionShortName : 'msg.metadata.ui.codetable.detail.used.column.dictionary.no.name' | translate }}
              <em class="ddp-icon-edit2"></em>
            </span>
              <!-- //data -->
              <!-- edit -->
              <div class="ddp-wrap-input">
                <component-input
                  [compType]="'default'"
                  [value]="reShortName"
                  [placeHolder]="'msg.metadata.ph.dictionary.create.recommendation.short.name' | translate"
                  (changeValue)="reShortName = $event; onClickUpdateShortName();">
                </component-input>
                <span class="ddp-btn-check" (click)="onClickUpdateShortName()"></span>
              </div>
              <!-- //edit -->
            </div>
          </td>
        </tr>
        <tr>
          <th>
            {{'msg.metadata.ui.dictionary.create.description' | translate}}
          </th>
          <td>
            <!-- 클릭시 ddp-selected 추가 -->
            <div class="ddp-txt-edit" [class.ddp-selected]="descEditFl" (clickOutside)="descEditFl = false">
              <!-- data -->
              <span class="ddp-data-name"
                    [class.ddp-data-none]="!description"
                    (click)="onChangeDescMode()">
                <span [innerHtml]="description && description.length > 0 ? description : ('msg.metadata.ui.codetable.detail.used.column.dictionary.no.description' | translate)"></span>
                <em class="ddp-icon-edit2"></em>
              </span>
              <!-- //data -->
              <!-- edit -->
              <div class="ddp-wrap-input sys-desc-input">
                <component-input
                  [compType]="'apply'"
                  [value]="reDesc"
                  [placeHolder]="'msg.comm.ui.create.desc' | translate"
                  (changeValue)="onClickUpdateDescription($event);" >
                </component-input>
              </div>
              <!-- //edit -->
            </div>
          </td>
        </tr>
        <tr>
          <th>
            {{'msg.metadata.ui.dictionary.create.code-table' | translate}}
          </th>
          <td>
            <div class="ddp-select-search" [class.ddp-selected]="isShowCodeTableDetail" (clickOutside)="isShowCodeTableDetail = false">
              <a href="javascript:" class="ddp-ui-search2" [class.ddp-data-none]="!(columnDictionary.codeTable && columnDictionary.codeTable.name && columnDictionary.codeTable.name.length > 0)" (click)="onClickShowCodeTableDetail()">
                {{ (columnDictionary.codeTable && columnDictionary.codeTable.name && columnDictionary.codeTable.name.length > 0) ? columnDictionary.codeTable.name : ('msg.metadata.ui.codetable.detail.used.column.dictionary.no.code.table' | translate) }}
                <span class="ddp-icon-search" (click)="onClickChooseCodeTable(); $event.stopImmediatePropagation()"></span>
              </a>
              <!-- hover -->
              <div class="ddp-box-layout4 " style="" *ngIf="columnDictionary.linkCodeTable">
                <a href="javascript:" class="ddp-btn-close" (click)="isShowCodeTableDetail = false"></a>
                <div class="ddp-data-title">
                  {{'msg.metadata.ui.codetable.choose.code.table.preview.title' | translate}}
                </div>
                <div class="ddp-data-code">
                  <table class="ddp-table-code ddp-inherit">
                    <colgroup>
                      <col width="90px">
                      <col width="*">
                    </colgroup>
                    <tbody>
                    <tr *ngFor="let pair of columnDictionary.codeTable?.codes">
                      <td>
                        <span class="ddp-txt-long">{{pair.code}}</span>
                        <!-- tooltip -->
                        <div class="ddp-ui-tooltip-info">
                          <em class="ddp-icon-view-top"></em>
                          {{pair.code}}
                        </div>
                        <!-- //tooltip -->
                      </td>
                      <td>
                        <span class="ddp-txt-long">{{pair.value}}</span>
                        <!-- tooltip -->
                        <div class="ddp-ui-tooltip-info">
                          <em class="ddp-icon-view-top"></em>
                          {{pair.value}}
                        </div>
                        <!-- //tooltip -->
                      </td>
                    </tr>
                    </tbody>
                  </table>
                  <a href="javascript:" class="ddp-link-detail" (click)="onClickCodeTableDetails(columnDictionary.codeTable)">{{'msg.storage.btn.detail' | translate}}</a>
                </div>

              </div>
              <!-- //hover -->
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <!-- table detail -->
      <div class="ddp-wrap-table-detail">
        <label class="ddp-label-detail">{{'msg.metadata.ui.dictionary.create.format.information' | translate}}</label>
        <table class="ddp-table-detail ddp-type">
          <colgroup>
            <col width="160px">
            <col width="*">
          </colgroup>
          <tbody>
          <!-- 첫번째 타입 셀렉트 박스 -->
          <tr>
            <th>
              {{'msg.metadata.ui.dictionary.create.type' | translate}}
            </th>
            <td>
              <div class="ddp-clear ddp-type-multy">
                <div class="ddp-col-6">
                  <!-- selectbox -->
                  <div class="ddp-type-selectbox"
                       [class.ddp-selected]="logicalTypeShowFl"
                       (click)="logicalTypeShowFl = !logicalTypeShowFl" (clickOutside)="logicalTypeShowFl = false">
                  <span class="ddp-txt-selectbox ddp-icon">
                    <em class="{{getFieldTypeIconClass(columnDictionary.logicalType?.toString())}}"></em>
                    {{getLogicalTypeLabel()}}
                  </span>
                    <div class="ddp-wrap-popup2 ddp-types ddp-top2 ddp-scroll-none">
                      <ul class="ddp-list-popup">
                        <li [class.ddp-selected]="isSelectedLogicalType('STRING')">
                          <a href="javascript:" (click)="onChangeLogicalType('STRING')">
                            <em class="ddp-icon-type-ab"></em>
                            {{'msg.metadata.ui.dictionary.type.string' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>
                        <li [class.ddp-selected]="isSelectedLogicalType('BOOLEAN')">
                          <a href="javascript:" (click)="onChangeLogicalType('BOOLEAN')">
                            <em class="ddp-icon-type-tf"></em>
                            {{'msg.metadata.ui.dictionary.type.boolean' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>
                        <li [class.ddp-selected]="isSelectedLogicalType('INTEGER')">
                          <a href="javascript:" (click)="onChangeLogicalType('INTEGER')">
                            <em class="ddp-icon-type-int"></em>
                            {{'msg.metadata.ui.dictionary.type.integer' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>
                        <li [class.ddp-selected]="isSelectedLogicalType('DOUBLE')">
                          <a href="javascript:" (click)="onChangeLogicalType('DOUBLE')">
                            <em class="ddp-icon-type-float"></em>
                            {{'msg.metadata.ui.dictionary.type.double' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>
                        <li [class.ddp-selected]="isSelectedLogicalType('TIMESTAMP')">
                          <a href="javascript:" (click)="onChangeLogicalType('TIMESTAMP')">
                            <em class="ddp-icon-type-calen"></em>
                            {{'msg.metadata.ui.dictionary.type.timestamp' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>

                      </ul>

                      <ul class="ddp-list-popup">
                        <li [class.ddp-selected]="isSelectedLogicalType('LNT')">
                          <a href="javascript:" (click)="onChangeLogicalType('LNT')">
                            <em class="ddp-icon-type-latitude"></em>
                            {{'msg.metadata.ui.dictionary.type.latitude' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>
                        <li [class.ddp-selected]="isSelectedLogicalType('LNG')">
                          <a href="javascript:" (click)="onChangeLogicalType('LNG')">
                            <em class="ddp-icon-type-longitude"></em>
                            {{'msg.metadata.ui.dictionary.type.longitude' | translate}}
                            <em class="ddp-icon-check"></em>
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <!-- //selectbox -->
                </div>
              </div>
            </td>
          </tr>
          <!-- //첫번째 타입 셀렉트 박스 -->
          <!-- time format -->
          <tr *ngIf="isShowTimeFormat()">
            <th>
              {{'msg.metadata.ui.dictionary.create.time.format' | translate}}
            </th>
            <td>
              <!-- 클릭시 ddp-selected 추가 -->
              <div class="ddp-txt-edit"
                   [class.ddp-selected]="timeFormatEditFl"
                   (clickOutside)="timeFormatEditFl = false">
                <!-- data -->
                <span class="ddp-data-name" [class.ddp-data-none]="isEmptyDictionaryFormat()" (click)="onChangeTimeFormatMode()">
              {{isEmptyDictionaryFormat() ? ('msg.metadata.ui.codetable.detail.used.column.dictionary.no.format'| translate) : columnDictionary.format.format}}
                  <em class="ddp-icon-edit2"></em>
            </span>
                <!-- //data -->
                <!-- edit -->
                <div class="ddp-wrap-input">
                  <input #descElement type="text" class="ddp-input-edit"
                         [(ngModel)]="reTimeFormat"
                         [focus]="timeFormatEditFl"
                         (keyup.enter)="onClickUpdateTimeFormat()"
                         placeholder="">
                  <span class="ddp-btn-check" (click)="onClickUpdateTimeFormat()"></span>
                </div>
                <!-- //edit -->
              </div>
            </td>
          </tr>
          <!-- //time format -->
          </tbody>
        </table>
      </div>
      <!-- //table detail -->

      <!-- table detail -->
      <div class="ddp-wrap-table-detail">
        <div class="ddp-type-plan">
          <label class="ddp-label-detail">{{'msg.metadata.dictionary.used.metadata' | translate}} ({{linkedMetadataTotalCount}})</label>
        </div>
        <table class="ddp-table-form ddp-table-type3 ddp-full ddp-cursor-none">
          <colgroup>
            <col width="*">
            <col width="20%">
            <col width="15%">
            <col width="15%">
          </colgroup>
          <thead>
          <tr>
            <th>
              {{'msg.comm.detail.metadata-name' | translate}}
            </th>
            <th>
              {{'msg.metadata.th.name' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.logical.type' | translate}}
            </th>
            <th>
              {{'msg.storage.ui.th.format' | translate}}
            </th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let metadata of getLinkedMetaDataColumn()">
            <td>
            <span class=" ddp-txt-long" (click)="onClickMetadataName(metadata)">
                {{metadata.metadataName}}
            </span>
            </td>
            <td>
              {{metadata.name}}
            </td>
            <td>
              {{metadata.type}}
            </td>
            <td>
              {{metadata.format}}
            </td>
          </tr>
          <tr *ngIf="linkedMetadataList.length === 0">
            <td colspan="4" class="ddp-nodata">{{'msg.storage.ui.no.data' | translate}}</td>
          </tr>
          </tbody>
        </table>
        <!-- 더보기 -->
        <a href="javascript:" class="ddp-btn-moretype2"
           *ngIf="linkedMetadataList.length > 3"
           (click)="onClickUsedInMetadataMoreList()">{{'msg.comm.ui.more' | translate}} &gt;</a>
        <!-- //더보기 -->
      </div>
      <!-- //table detail -->
    </div>
  </div>
  <!-- //상세 -->
</div>
<!-- 코드테이블 선택 컴포넌트 -->
<app-choose-code-table (chooseComplete)="onChangeSelectCodeTable($event)"></app-choose-code-table>
<!-- //코드테이블 선택 컴포넌트 -->
<!-- 컬럼 사전 삭제 모달 -->
<app-delete-modal (deleteConfirm)="deleteColumnDictionary()"></app-delete-modal>
<!-- //컬럼 사전 삭제 모달 -->
<!-- 연결된 메타데이터 컴포넌트 -->
<app-linked-metadata></app-linked-metadata>
<!-- //연결된 메타데이터 컴포넌트 -->
